#main {
    width: 100%;
    position: absolute;
    left:0px;
    right:0px;
    top:0px;
    bottom:0px;
}

html{
    overflow:hidden;
}

#loginBox{
    display:none;
    padding:6px;
    user-select:none;
    cursor:pointer;
    height:52px;
    float:right;
    margin-right:10px;
    padding-left:30px;
    position:absolute;
    right:0px;
}

#codemao-login{
    display:none;
}

.login-select{
    font-size:20px;
    user-select:none;
    font-weight: 700;
    cursor:pointer;
}

.login-selecting{
    color:#3374ff
}

.login-unselecting{
    color:#bebebe;
}

#userImg{
    height:50px;
    border-radius:50%;
    float:right;
    background-color:#ffffff;
    border:1px solid lightgrey;
}

#userName{
    font-size:16pt;
    float:right;
    line-height: 2.4em;
    margin-left:15px;
    margin-right:30px;
}

#loginBox:hover{
    background-color:rgba(0,0,0,0.1)
}
#loginBox:hover .select{
    display:block;
}
#relog{
    position:absolute;
    top:64px;
    width:150px;
    border-radius:6px;
    box-shadow:3px 3px 10px grey;
    font-size:13pt;
    color:#ff401e;
    line-height: 2.4em;
}

.loginButton{
    padding:15px;
    padding-left:25px;
    padding-right:25px;
    transition:0.5s background-color;
    float:right;
    height:fit-content;
    width:fit-content;
    user-select:none;
    border-radius:25px;
    cursor:pointer;
    position:absolute;
    top:0px;
    bottom:0px;
    margin:auto;
    right:10px;
    font-size:13pt;
}

.loginButton:hover{
    background-color:rgba(0,0,0,0.25);
}

    .loginButton:active {
        background-color: rgba(0,0,0,0.55);
    }

.h1 {
    user-select: none;
    width: 400px;
    position: relative;
    margin: 0 auto;
    margin-left: 79px;
    font-size: 1.9em;
    line-height: 2.4em;
    float: left;
}

.wc-dialog {
    padding: 20px;
    min-width: 300px;
    min-height: 0px;
    border: 0px;
    border-radius: 10px;
    font-size: 13pt;
    box-shadow: 2px 3px 15px black;
    overflow:hidden;
    animation:open 0.2s linear;
}
@keyframes open{
    0%{transform:scale(0,0)}
    50%{transform:scale(1.1,1.1)}
    100%{transform:scale(1,1)}
}
.wc-button {
    min-width: 75px;
    min-height: 30px;
    padding: 5px;
    font-size: 12pt;
    border: 0px;
    border-radius: 3px;
    cursor: pointer;
    float: right;
    outline: 0px solid transparent;
    margin: 4px;
}

.wc-button1 {
    background-color: rgb(0,135,255);
    color: white;
}

    .wc-button1:hover {
        background-color: rgb(0,120,240);
    }

    .wc-button1:active {
        background-color: rgb(0,110,230);
    }

.wc-button2 {
    background-color: rgb(240,240,240);
    color: rgb(0,135,255);
}

    .wc-button2:hover {
        background-color: rgb(235,235,235);
    }

    .wc-button2:active {
        background-color: rgb(225,225,225);
    }

.input {
    font-size: 13pt;
    padding: 3px;
    width: 325px;
    border: 3px solid rgb(0,135,255);
    border-radius: 4px;
    outline: 0px solid transparent;
}

.wc-dialog-title {
    font-size: 14.5pt;
    margin-bottom: 15px;
    user-select: none;
    font-weight: 600;
}

.wc-dialog-content {
    overflow: auto;
    white-space: nowrap;
    margin-bottom: 15px;
    max-height: 500px;
}

.times {
    font-size: 26pt;
    color: grey;
    float: right;
    cursor: pointer;
}

.wc-dialog-content::-webkit-scrollbar {
    height: 4px;
    width: 4px;
}

.wc-dialog-content::-webkit-scrollbar-thumb {
    background: #bebebe;
}

    .wc-dialog-content::-webkit-scrollbar-thumb:hover {
        background: #aaaaaa;
    }

    .wc-dialog-content::-webkit-scrollbar-thumb:active {
        background: #909090;
    }

.contentes {
    float: left;
    font-size: 25pt;
    width: 100px;
    height: 64px;
    cursor: pointer;
    position: relative;
    z-index: 107;
    left: -200px;
    user-select: none;
}

    .contentes:hover {
        background-color: rgba(0,0,0,0.1)
    }

.p {
    font-size: 15pt;
    margin: 0 auto;
    line-height: 2.4em;
}

.select {
    width: 105px;
    height: 42px;
    background-color: white;
    color: black;
    text-align: center;
    display: none;
    user-select: none;
}

    .select:hover {
        background-color: rgb(235,235,235);
    }

.contentes:hover .select {
    display: block;
}

.mode-edit,
.mode-maker,
.mode-blockly {
    display: none;
}

[mode="maker"] .mode-maker,
[mode="edit"] .mode-edit,
[mode="blockly"] .mode-blockly {
    display: block;
}

.blockly-editor {
    position: absolute;
    width: 100%;
    background-color: #eee;
    margin-top:64px;
    top:0px;
    bottom:0px;
}

[mode="blockly"] .blockly-editor {
    left: 0;
}

.maker {
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    height: 460px;
    width: 400px;
}

    .maker > div {
        display: flex;
        justify-content: space-between;
    }

.button {
    width: 120px;
    height: 140px;
    color: #fff;
    font-size: 3em;
    text-align: center;
    vertical-align: middle;
    line-height: 140px;
}

.mdl-button {
    margin: 1em 0;
    float: right;
}

.header {
    height: 64px;
    width: 100%;
    position: fixed;
    z-index: 100;
}

#code {
    /*width: 23.75%;*/
    background-color: white;
    position: absolute;
    top: 0px;
    left: 75%;
    bottom:0px;
    right:0px;
    overflow: scroll;
    padding: 8px;
    font-size: 13pt;
    white-space: nowrap;
}

    #code::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }

    #code::-webkit-scrollbar-thumb {
        background: #bebebe;
        border-radius: 5px;
    }

        #code::-webkit-scrollbar-thumb:hover {
            background: #aaaaaa;
            border-radius: 5px;
        }

        #code::-webkit-scrollbar-thumb:active {
            background: #909090;
            border-radius: 5px;
        }

html::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

html::-webkit-scrollbar-thumb {
    background: #bebebe;
    border-radius: 5px;
}

    html::-webkit-scrollbar-thumb:hover {
        background: #aaaaaa;
        border-radius: 5px;
    }

    html::-webkit-scrollbar-thumb:active {
        background: #909090;
        border-radius: 5px;
    }

.blocklyTreeRow {
    height: 30px;
    width: 65px;
    border-radius: 20px;
    cursor: pointer;
    padding: 5px;
    margin-bottom: 10px;
    color: white;
    text-align:left;
}
    .blocklyTreeRow:after {
        content: "";
        background: grey;
        position:relative;
        top:-28px;
        height:35px;
        width:64px;
        display:block;
        padding:3px;
        border-radius:20px;
        opacity:0;
    }
    .blocklyTreeRow:hover:after{
        opacity:0.2;
    }
.blocklyToolboxDiv {
    padding: 10px;
    overflow: scroll;
    white-space: nowrap;
}

    .blocklyToolboxDiv::-webkit-scrollbar {
        height: 6px;
        width: 6px;
    }

    .blocklyToolboxDiv::-webkit-scrollbar-thumb {
        background: rgb(200,200,200);
        border-radius: 3px;
    }
    .blocklyToolboxDiv::-webkit-scrollbar-thumb:hover {
        background: rgb(185,185,185);
        border-radius: 3px;
    }
        .blocklyToolboxDiv::-webkit-scrollbar-thumb:active {
            background: rgb(175,175,175);
            border-radius: 3px;
        }

.blocklyFlyoutBackground {
    fill: white;
}

.blocklyFlyout {
    box-shadow: 3px 2px 3px grey;
    backdrop-filter: blur(5px);
}

#copy {
    height: 60px;
    width: 60px;
    border-radius: 30px;
    background-color: #ffd800;
    position: fixed;
    z-index: 105;
    color: white;
    user-select: none;
    font-size: 13pt;
    cursor: pointer;
    transition: background-color 0.5s,box-shadow 0.5s;
    right:40px;
    bottom:40px;
}

    #copy:hover {
        background-color: #efcd00;
        box-shadow: 0px 3px 15px grey;
    }

.load {
    width: 100px;
    height: 100px;
    border: 8px solid rgb(230,230,230);
    border-radius: 50%;
    border-top: 8px solid rgb(0,135,255);
    animation: 0.8s loading linear infinite;
}

center {
    margin-top: 8%;
}

.title {
    color: rgb(0, 48, 83);
    font-size: 35pt;
}

@keyframes loading {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg)
    }
}

#loadContent {
    font-size: 15pt;
    color: rgb(0,48,83);
}

.blocklyScrollbarHandle {
    fill: rgb(200,200,200);
}

.loadBg {
    width: 100%;
    background-color: rgb(240,240,255);
    position: fixed;
    top: 0px;
    bottom:0px;
    z-index: 200;
    user-select: none;
}

.colorDiv {
    width: 90px;
    height: 90px;
    border-radius: 4px;
    float: left;
    margin: 15px;
    cursor: pointer;
    margin-bottom: 30px;
    border: 3px solid rgba(0,0,0,0);
}